<template>
	<view class="skuSelect">
		<view class="title">
			{{title||'规格'}}
		</view>
		
		<view class="skuBtn">
			<text v-for="(item,i) in skuData" :key="i" @click="select(i)" :style="checkI==i?checkCss:{}">{{item.sname}}</text>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const props = defineProps(['title','skuData','checkI'])
	const emit = defineEmits({
		handlerSelect:(e)=>{}
	})
	// const checkI = ref(0)
	const checkCss = ref({
		border:'2rpx solid #fb2c19',
		background:'#ffe0dd',
		color:'#fb2c19'
	})
	function select(i){
		props.checkI = i
		emit('handlerSelect',i)
	}
</script>

<style>
	.title{
		margin:30rpx 0;
		font-weight:bold;
	}
	.skuBtn{
		display:flex;
		flex-wrap: wrap;
	}
	.skuBtn text{
		padding:10rpx 30rpx;
		margin:20rpx;
		background:#f0f0f0;
		border-radius:30rpx;	
	}
</style>